// 获取menu content
let menu = document.querySelector(".menu")
let content = document.querySelector('.content')
let pc = document.querySelector('.pc')
// console.log(pc)

// 封装一个函数
function render() {
    // 首先获取菜单标题数据
    fetch('http://chst.vip:1234/api/getcategorytitle')
        .then(body => body.json())
        .then(res => {
            console.log(res.result)

            // 声明一个el,用于存放menu内容
            let el = ''
            // 根据拿到的数据res展示列表项
            // 遍历res.result中的每一项
            res.result.forEach(item => {
                el += `<div class="menuBar">
        <div class="title" titleId="${item.titleId}">
            <h4>${item.title}</h4>
            <p></p>
        </div>
        <div class="content">
            
        </div>
    </div>`
            })
            menu.innerHTML = el;
            // 实现卷帘门的效果，点击h6标签，显示content内容
            // slideDown卷下来 slideUp卷上去 slideToggle
            //声明一个开关flag
            //flag=true 表示已经展开了 flag=false 表示没有展开

            $('.menuBar').find('.content').slideUp(0, function () {
                $('.content').css('display', 'block');
                $('.content').prop('flag', false);
                // console.log($('.content'))
            })


            $('.menuBar').on('click', '.title', function () {

                // // console.log($(this))


                // 获取当前的开关状态 如果是true 说明自己已经展开了 要收起来
                let titleid = $(this).attr('titleId')
                console.log(titleid)
                let flag = $(this).next().prop('flag')
                console.log(flag)
                if (flag) {
                    $(this).next().slideUp(200).prop('flag', false)
                    return
                }
                $(this).next().slideDown(200).prop('flag', true).siblings().find('.content').slideUp(200).prop('flag', false)

                // console.log($(this))
                // console.log($(this).find('.content').prop('flag'))


                fetch(`http://chst.vip:1234/api/getcategory?titleid=${titleid}`)
                    .then(body => body.json())
                    .then(res => {
                        console.log(res)
                        let str = '';
                        res.result.forEach(item => {
                            str += `<p class="pc" category=${item.category} categoryid=${item.categoryId}>${item.category}</p>`
                        })
                        $(this).next().after().html(str)
                    })


                $('.content').on('click', '.pc', function () {
                    console.log($(this))
                    let categoryid = $(this).attr('categoryid')
                    console.log(categoryid)
                    location.href = `../pages/brandList.html?categoryid=${categoryid}`
                })
            })



        })



}

render()


// 返回顶部
let toTop = $('.gotop').get(0)
// console.log(toTop)

toTop.onclick = function (e) {
    console.log(123)
    document.documentElement.scrollTop = 0;
}
